<template>
  <div>
    <div class="mynavContaier">
      <mynav></mynav>
    </div>
    <div class="container kline">
      <center-info></center-info>
      <el-row style="margin:15px auto;">
        <el-col :xs="24" :sm="18" :md="18">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="日期" style="margin-bottom:0px;">
              <!-- <el-date-picker v-model="formInline.date" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期"  style="width:160px">
 -->
              </el-date-picker>
               <el-date-picker
                    v-model="formInline.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    @change="dateChange"
                    end-placeholder="结束日期">
                  </el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="6" :md="6">
          <el-switch v-model="bgColor" active-text="浅色" inactive-text="深色" active-color="grey" inactive-color="#1f212d">
          </el-switch>
        </el-col>
      </el-row>
      <div id="showInfo">
        <div class="commColor">
          <div>{{type}}</div>
        </div>
      </div>
      <el-row :gutter="20" :align="'middle'" class="info">
        <el-col :xs="24" :sm="24" :md="24">
          <div class="K-line" ref="klineChart"></div>
        </el-col>
      </el-row>
      <el-row :gutter="20" :align="'middle'" class="info">
        <el-col :span="24">
          <el-button-group class="buttonGroup">

            <el-button v-if="type=='青铜'" type="primary">青铜</el-button>
            <el-button v-else @click="checked('青铜')">青铜</el-button>

            <el-button v-if="type=='白银'" type="primary">白银</el-button>
            <el-button v-else @click="checked('白银')">白银</el-button>

            <el-button v-if="type=='黄金'" type="primary">黄金</el-button>
            <el-button v-else @click="checked('黄金')">黄金</el-button>

            <el-button v-if="type=='铂金'" type="primary">铂金</el-button>
            <el-button v-else @click="checked('铂金')">铂金</el-button>

            <el-button v-if="type=='钻石'">钻石</el-button>
            <el-button v-else @click="checked('钻石')">钻石</el-button>

            <el-button v-if="type=='阅读分红'" type="primary">阅读分红</el-button>
            <el-button v-else @click="checked('阅读分红')">阅读分红</el-button>

          </el-button-group>
        </el-col>
      </el-row>
    </div>
    <myfooter></myfooter>
  </div>
</template>

<script>
  import axios from 'axios'
  import mynav from "@/components/nav";
  import myfooter from "@/components/footer";
  import centerInfo from "@/components/centerinfo";
  import echarts from "echarts";
  import * as chartData from "../../assets/js/tmpData.js"
  import {
    initMOption
  } from "../../assets/js/ggb.js"
  import {
    trade,
    price,
    k_amount,
    tradeInfo,
    k_price,
    getAdvertisement
  } from '@/api/service'
  export default {
    mChart: null,
    opt: null,
    name: "home",
    components: {
      mynav,
      myfooter,
      centerInfo
    },
    data() {
      return {
        bgColor: true,
        type:'钻石',
        formInline: {
          date: "",
        },
        defaultData:
              {
                "eventTime": [],
                "bronze": [],
                "silver": [],
                "gold": [],
                "platinum": [],
                "diamond": [],
                "readBonus":[],
                "vol":[],
              },
        param: {
          type: 'd',
          unit: 1,
          beginTime:"",
          endTime:''
        },
        listData: [],
      }
    },
    watch: {
      bgColor(val) {
        this.opt.backgroundColor = val ? '#fff' : "#1f212d";
        this.mChart.setOption(this.opt);
      }
    },
    mounted() {
      let ele = this.$refs.klineChart
      this.mChart = echarts.init(ele);
      let beginTime = this.dateFormat(new Date(), 'YYYY-mm-dd') ;
      let endTime = this.dateFormat(new Date(), 'YYYY-mm-dd') ;
      this.search({});
    },
    methods: {
      checked(args) {
        switch (args){
          case '青铜':
            this.renderChart({
                eventTime:this.defaultData.eventTime,
                 vol:this.defaultData.vol,
                 data:this.defaultData.bronze,
            },args);
            break;
          case '白银':
          this.renderChart({
              eventTime:this.defaultData.eventTime,
               vol:this.defaultData.vol,
               data:this.defaultData.silver,
          },args);
            break;
          case '黄金':
          this.renderChart({
              eventTime:this.defaultData.eventTime,
               vol:this.defaultData.vol,
               data:this.defaultData.gold,
          },args);
            break;
          case '铂金':
          this.renderChart({
              eventTime:this.defaultData.eventTime,
               vol:this.defaultData.vol,
               data:this.defaultData.platinum,
          },args);
            break;
          case '钻石':
          this.renderChart({
              eventTime:this.defaultData.eventTime,
               vol:this.defaultData.vol,
               data:this.defaultData.diamond,
          },args);
            break;
          case '阅读分红':
          this.renderChart({
              eventTime:this.defaultData.eventTime,
               vol:this.defaultData.vol,
               data:this.defaultData.readBonus,
          },args);
            break;
          default:
            break;
        }
        this.type = args;
      },
      dateChange() {
        let beginTime = this.dateFormat(this.formInline.date[0], 'YYYY-mm-dd');
        let endTime = this.dateFormat(this.formInline.date[1], 'YYYY-mm-dd');
        this.search({
          beginTime,
          endTime
        });
      },
      search(date) {
        if(date.beginTime){
          this.param.beginTime=date.beginTime+" 00:00:00";
          this.param.endTime=date.endTime+" 00:00:00";
          this.param.unit=1;
          this.param.type='d';
        }

        getAdvertisement(date).then(advertisment=>{
          this.param.beginTime=advertisment.data[0].eventTime+" 00:00:00";
          this.param.endTime=advertisment.data[advertisment.data.length-1].eventTime+" 00:00:00";
          k_amount(this.param).then(amountRes=>{
              var ary=advertisment.data;
              var mountAry=amountRes.data;
              ary.forEach(item=>{
                for(let key in this.defaultData){
                   if(key!="vol")
                   this.defaultData[key].push(item[key])
                }
                for(let i=0;i<mountAry.length;i++){
                  if(item.eventTime==mountAry[i].time){
                    this.defaultData.vol.push(mountAry[i].volume);
                  }
                }
              })

            this.renderChart({
                eventTime:this.defaultData.eventTime,
                 vol:this.defaultData.vol,
                 data:this.defaultData.diamond,
            },'钻石');
          })
        })
      },
      renderChart(data,name){
        this.opt = initMOption(data,name);
        this.opt.backgroundColor = this.bgColor ? '#fff' : "#1f212d";
        this.mChart.setOption(this.opt);
      },
      dateFormat: (args, fm) => {
        let fmt = fm || "YYYY-mm-dd HH:MM:SS"
        let ret;
        if (args) {
          let date = new Date(args)
          const opt = {
            "Y+": date.getFullYear().toString(), // 年
            "m+": (date.getMonth() + 1).toString(), // 月
            "d+": date.getDate().toString(), // 日
            "H+": date.getHours().toString(), // 时
            "M+": date.getMinutes().toString(), // 分
            "S+": date.getSeconds().toString() // 秒
          };
          for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
              fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
          };
          return fmt;
        } else {
          return "";
        }

      }
    }
  }
</script>

<style lang="less">
  .rightTable {
    .el-table__body {
      tr {
        line-height: 15px;

        td {
          padding: 0px;
          border-top: 0px;

        }

        &:nth-child(odd) {
          background: #dee2e6;
        }

        &:nth-child(even) {
          background: #fff;
        }
      }
    }
  }

  .mynavContaier {
    background: #3740C3;
    width: 100%;
    height: 75px;
  }

  .kline {
    margin: 15px auto;
    text-align: left;
    width: 100%;
    height: calc(100vh - 75px);


    .buttonGroup {
      margin: 15px 0px;
    }

    .K-line {
      min-height: 535px;
      width: 100%;
    }
  }
</style>
